<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link rel="stylesheet" href="posture-editor.css"> -->
    <script src="./static/js/three.min.js"></script>
    <script src="./static/js/mannequin.js"></script>
  </head>
  <body>
    <canvas
      width="1920"
      height="254"
      style="width: 1920px; height: 254px; position: fixed; top: 0px; left: 0px"
    ></canvas>
    <!-- <script>
      createScene();

      man = new Male();
      // var geometry = new THREE.CylinderBufferGeometry(0.4, 0.4, 80),
      //   material = new THREE.MeshPhongMaterial({ color: "crimson" });

      function animate(t) {
        scene.rotation.y = t / 400;
      }

      man.posture = {"version":6,"data":[3.8,[22.7,-90,0],[0,0,25],[0,0,14.5],[6,0,-27.3],[54.1],[-6,-6,-0.6],[-6,0,91.2],[61.1],[6,6,-0.6],[7,-0.6,126.2],[6],[-15,0,0],[10,10],[-7,0.6,-74.2],[0],[15,0,0],[119.9,10]]}
    </script> -->

    <script>
		
			createScene();

			child = new Child();
			child.position.y = 5.5;

			child.r_leg.straddle = 5;
			child.l_leg.straddle = 5;
			child.r_leg.raise = 10;
			child.l_leg.raise = 10;
			child.r_knee.bend = 15;
			child.l_knee.bend = 15;

			// ball
			geometry = new THREE.IcosahedronBufferGeometry(7, 3);
			material = new THREE.MeshPhongMaterial({color: 'crimson'});

			ball = new THREE.Mesh(geometry, material);
			ball.position.set(0, -29.5 + 7, 0);
			ball.receiveShadow = true;
			ball.castShadow = true;

			scene.add(ball);

			function animate(t)
			{
				var time1 = (sin(2 * t) + cos(3 * t) + cos(5 * t)) / 3,
					time2 = (sin(2 * t - 60) + cos(3 * t - 90) + cos(5 * t - 120)) / 3;
        debugger
				ball.position.x = -3 * time1;

				child.position.x = -3 * time1;
				child.position.y = 4.2 + cos(90 * time1);

				child.bend = 0;
				child.turn = -90 - 20 * time1 + 20 * time2;
				child.tilt = 10 * time1;

				child.torso.turn = 0;
				child.torso.tilt = 25 * time1;
				child.torso.bend = 10 - 35 * time2;

				child.head.tilt = 25 * time1;
				child.head.turn = 20 * time2;

				child.l_leg.straddle = -4 - 20 * time1;
				child.r_leg.straddle = -4 + 20 * time1;

				child.l_ankle.tilt = 10 - 35 * time1;
				child.r_ankle.tilt = 10 + 35 * time1;

				child.l_arm.straddle = 70 + 70 * time2;
				child.r_arm.straddle = 70 - 70 * time2;

				child.l_elbow.bend = 60 - 60 * time1;
				child.r_elbow.bend = 60 + 60 * time1;

				child.l_fingers.bend = 90 - 90 * time2;
				child.r_fingers.bend = 90 + 90 * time2;

				scene.rotation.y = time1 / 2;
			}

		</script>
  </body>
</html>
